<template>
    <div class="page">
        <div class="drugs">
            <div class="cc">
                <img :src="thumbUrl" alt="">
                <div>   
                    <h4>{{drugData.name}}</h4>
                    <p>厂家：{{drugData.manufactor}}</p>
                    <p>规格：{{drugData.specification}}</p>
                </div>
            </div>
        </div>
        <div class="price">
            <div class="cc">
                <p>市场参考价</p>
                <div>￥{{drugData.price}}</div>
            </div>
        </div>
        <div class="way">
            <div class="cc">
                <h4>服用方式</h4>
                <p>{{drugData.way}}</p>
            </div>
        </div>
        <div class="avoid">
            <div class="cc">
                <ul class="clearfix">
                    <li v-for="(item, idx) in tabooList" :key="idx" @click="showTag(idx)">
                        <img :src="item.image_url" alt="">
                        <p>{{item.title}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-view">
            <div class="cc">
                <tab active-color="#3D96FF">
                    <tab-item selected @on-item-click="onItemClick">饮食禁忌</tab-item>
                    <tab-item @on-item-click="onItemClick">护理</tab-item>
                    <tab-item @on-item-click="onItemClick">不良反应</tab-item>
                    <tab-item @on-item-click="onItemClick">注意事项</tab-item>
                </tab>
                <div class="container">
                    <div class="view" v-if="active == 0">{{drugData.diet_taboo}}</div>
                    <div class="view" v-if="active == 1">{{drugData.care_life}}</div>
                    <div class="view" v-if="active == 2">{{drugData.care_psychic}}</div>
                    <div class="view" v-if="active == 3">{{drugData.attention}}</div>
                </div>
            </div>
        </div>
        <div class="similar-draugs" v-if="similarShow">
            <div class="title cc">同类药品</div>
            <ul>
                <li class="cc" v-for="(item, index) in drugList" :key="index" @click="goDown">
                    <img :src="item.thumb_url" alt="">
                    <div class="info">
                        <div>
                            <h4>{{item.name}}</h4>
                            <p>{{item.manufacturer}}</p>
                            <span>{{item.specification}}</span>
                        </div>
                        <label for="">
                            参考价：{{item.price}}
                        </label>
                    </div>
                </li>
            </ul>
            <div class="more" @click="goDown">
                <span>更多活动</span><i class="iconfont icon-youjiantou"></i>
            </div>
        </div>
        <bottom-dowload></bottom-dowload>
        <div class="place"></div>
    </div>
</template>
<script>
import { Tab, TabItem } from "vux";
import { commonFn } from "@/utils";
import bottomDowload from "@/components/bottomDowload.vue";
export default {
  components: {
    Tab,
    TabItem,
    bottomDowload
  },
  data() {
    return {
      drugData: {},
      tabooList: [],
      thumbUrl: "",
      active: 0,
      similarShow: true,
      drugList: []
    };
  },
  methods: {
    onItemClick(val) {
      this.active = val;
    },
    showTag(idx) {
      this.$vux.alert.show({
        title: this.tabooList[idx].title,
        content: this.tabooList[idx].brief,
        onShow() {
          console.log("Plugin: I'm showing");
        },
        onHide() {
          console.log("Plugin: I'm hiding");
        }
      });
    },
    getData() {
      this.$$api_client_drugDetail({
        data: {
          id: this.$route.query.id,
          action: "h5"
        },
        succFn: res => {
          this.drugData = res;
          this.tabooList = res.taboo_list.map(item => {
            item.image_url = commonFn.imgSplicing(item.image_url);
            return item;
          });
          this.thumbUrl = commonFn.imgSplicing(res.thumb_url);
          console.log(res.category_id);

          if (res.category_id == 0) {
            this.similarShow = false;
          } else {
            this.getSimmilar(res.category_id);
          }
        }
      });
    },
    getSimmilar(id) {
      this.$$api_client_categoryGrug({
        data: {
          category_id: id,
          entry_count: 3
        },
        succFn: res => {
          console.log(res.list);
          this.drugList = res.list.map(item => {
            item.thumb_url = commonFn.imgSplicing(item.thumb_url);
            if (item.price == 0) {
              item.price = "待完善";
            } else {
              item.price = "￥" + item.price;
            }
            return item;
          });
          console.log(this.drugList);
        }
      });
    },
    goDown() {
      this.$vux.confirm.show({
        title: "提示",
        content: "了解更多内容，请下载星诊所APP",
        onShow() {
          console.log("plugin show");
        },
        onHide() {
          console.log("plugin hide");
        },
        onCancel() {
          console.log("plugin cancel");
        },
        onConfirm() {
          window.location.href =
            "https://app.allclinic.cn/h5/#/clients/download";
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
